iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0
JavaScript

30天 JavaScript 提升計畫:從零到精通結合2024年的創新功能系列 第 14

第 14 天:2024 年 JavaScript 新特性 - 類型檢查

  • 分享至 

  • xImage
  •  

靜態類型檢查指的是在編譯階段檢查代碼的類型,這有助於發現類型錯誤,從而提高代碼的安全性和可維護性。

2024 年的 JavaScript 新特性中,靜態類型檢查的增強可能包括以下內容:

Record & Tuple


參考文章:JavaScript 中的 Tuple 和 RecordJavaScript Records & Tuples Proposal

提案中的 Record 和 Tuple 類型允許創建不可變的數據結構,這在靜態類型檢查中能提供更強的類型安全。
Record
類似於 JavaScript 中的對象 object,但不可變,創建 Record 時,所有屬性都必須在初始化時給定,且一旦創建後無法修改。

Tuple
類似於 JavaScript 中的數組 array 前面多了 #,但不可變;Tuple 中的每個元素都具有明確的類型,並且一旦創建後,元素不能被修改。

// 創建 Record 和 Tuple
const record = #{name: "Alice", age: 30}; // Record
const tuple = #[1, "Alice", true];        // Tuple

// 嘗試修改會報錯(如果支持 Record 和 Tuple)
record.name = "Bob";                      // 錯誤
tuple[0] = 2;                             // 錯誤

影響

  1. 不可變性:
    由於 Record 和 Tuple 是不可變的,這有助於提高代碼的可靠性和預測性,減少副作用。
  2. 靜態類型檢查:
    這些類型的引入可以強化靜態類型檢查工具對不可變數據結構的支持,提升類型安全。

範例
第 2 天:基本語法和資料類型中提到型別比較,如果陣列跟陣列互相比較就算索引值都是一樣,結果也會是 false,因為吃的記憶體位置不一樣!

但是如果加上 Tuple 就會得到 true,使用 Playground 測試結果如下:
Tuple

Pattern Matching


參考文章:TC39 Proposal for Pattern MatchingGoodbye if-else, Hello Pattern Matching in JavaScript (PROPOSAL)

Pattern Matching 提案主旨在引入更強大的模式匹配功能,這種語法糖可以用於更精確的模式匹配,有助於類型檢查和代碼簡化:

基本語法:
可以用於對象解構、數組解構以及模式匹配,支持複雜的條件表達式,可以更加精確地匹配數據結構中的值。

ECMAScript 2024 中的模式匹配提案尚未成為正式標準,所以在任何瀏覽器的使用測試下都會出現以下畫面。

// 模式匹配示例(假設語法類似於此)
function firstElement(arr) {
  return match(arr) {
    [first, ..rest] => first,
    [] => undefined
  }
}

firstElement([1, 2, 3]) // 1
firstElement([]) // undefined

目前畫面

目前類似的方法
JavaScript 已經在多個方面引入了可以用於模式匹配的功能,例如:第 3 天:操作符和控制流switch第 5 天:物件與陣列 的陣列方法 map 以及未來會提到的正規表達式 match

  • switch

    function matchValue(value) {
        switch (value) {
            case 1:
                return 'One';
            case 2:
                return 'Two';
            default:
                return 'Other';
        }
    }
    
    console.log(matchValue(3));   // Other
    
  • Array.prototype.flatMapArray.prototype.map

    const legends = ['ECMAScript'];
    const years = ['2022', '2023', '2024'];
    
    const combinations = legends.flatMap(legend =>
        years.map(year => `${legend}_${year}`)
    );
    
    console.log(combinations);    // ['ECMAScript_2022', 'ECMAScript_2023', 'ECMAScript_2024']
    
  • 正規表示式 match

    MDN:String.prototype.match()

    主要用於字串的正規表示式匹配,可以用來檢索和提取字串中的匹配項。

    const str = 'The quick brown fox jumps over the lazy dog. It barked.';
    const regex = /quick/;
    const result = str.match(regex);
    
    console.log(result);
    

    印出結果

如果真的有機會成真,將會影響...
代碼簡化:可以用更簡潔的語法處理複雜的條件匹配,代碼更易讀。
靜態類型檢查:提升靜態類型檢查工具對複雜數據結構的支持,能更精確地檢查模式匹配中的類型。


上一篇
第 13 天:2024 年 JavaScript 新特性 - 性能優化
下一篇
第 15 天:JavaScript 的原型鏈與繼承
系列文
30天 JavaScript 提升計畫:從零到精通結合2024年的創新功能22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言